<template>
  <div id="address">
    <page-header
      @handle-search-click-emit="userSearch"
      @handle-add-click-emit="handleAddClick"
    ></page-header>
    <div class="user-table">
      <page-table
        :table-list="tableList"
        :table-data="tableData"
        :is-site="true"
        @handle-edit-click-emit="HandleEditClick"
        @handle-dle-click-emit="handleDelClick"
        @handle-checkbox-change-emit="handleCheckboxChange"
      ></page-table>
    </div>

    <page-box
      :drawer-visibility="drawerVisibility"
      :size="drawerSize"
      :title="drawerTitle"
      :form="form"
      @handle-close-emit="handleClose"
      @handle-submit-emit="handleSubmit"
    ></page-box>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from "vue";
import PageHeader from "./cpns/header.vue";
import PageTable from "@/components/page-table/index.vue";
import PageBox from "./cpns/drawer.vue";
import { ElMessage, ElMessageBox } from "element-plus";

import { tableList } from "./category.config";
import { themePinia } from "@/libs/pinia/theme";
import { ICategoryForm } from "@/libs/type/category";
import { categoryPinia } from "@/libs/pinia/category";

const store = categoryPinia()
const theme = themePinia();

// el-table
const page = reactive({
  name: "",
});

let form = reactive({
  title: "",
  descs: "",
  sort: undefined,
});

store.listActions(page);
const tableData = computed(() => store.list);
const TableListColor = computed(() => theme.TableListColor);

const userSearch = (title: any) => {
  page.name = title;
  store.listActions(page);
};

// drawer
const flag = ref(false); // 用于判断新增和编辑 true编辑 false 新增
const drawerVisibility = ref(false);
const drawerSize = ref("30%");
const drawerTitle = ref("详细信息");

const handleAddClick = () => {
  form = Object.assign(form, {
    id: undefined,
    name: undefined,
    svg: undefined,
    act_svg: undefined,
    sort: undefined,
  });
  flag.value = false;
  drawerVisibility.value = true;
  drawerTitle.value = "地址新增";
};

const HandleEditClick = (row: any) => {
  Object.assign(form, row);
  flag.value = true;
  drawerVisibility.value = true;
  drawerTitle.value = "地址编辑";
};

const handleClose = () => {
  // 判断是否有值进行关闭
  drawerVisibility.value = false;
};


// 新增编辑提交
const handleSubmit = (info: ICategoryForm) => {
  if (flag.value) {
    store.updateActions(info);
  } else {
    store.addActions(info);
  }
};

const handleCheckboxChange=(obj:ICategoryForm)=>{
  store.updateActions(obj);
}

// 删除
const handleDelClick = (obj: ICategoryForm) => {
  ElMessageBox.confirm("您确认要删除地址吗？", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    store.removeActions(obj);
  });
};
</script>

<style lang="scss" scoped>
#address {
  width: 100%;
}
.user-table {
  display: flex;
  padding: 1.5rem;
  background-color: v-bind(TableListColor);
  margin-top: 1.5rem;
  border-radius: 1rem;
}
.el-table__header {
  border-radius: 1rem;
}
</style>
./category.config